/*
 * @Author: xiaosihan 
 * @Date: 2024-10-06 12:51:10 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-10-06 20:40:00
 */

import factoryStore from "@views/factory/factoryStore";
import { Button, Form, Input, InputNumber, Select } from "antd";
import axios from "axios";
import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./introduce.module.less";
import ImgItem from "../CompanyInfo/ImgItem/ImgItem";
import utils from "@utils";
const { Option } = Select;

interface Iprops {
    children?: ReactNode
}

// 简介
export default function Introduce(props: Iprops) {

    const dom = useRef<HTMLDivElement | null>(null);
    const [logo, setLogo] = useState("./logo2.png");
    const [chinaJSON, setChinaJSON] = useState<any>([]);
    const [form] = Form.useForm();

    useEffect(() => {
        (async () => {
            const res = await axios.get("./china.json");
            setChinaJSON(res.data);
        })();
    }, []);

    useEffect(() => autorun(() => {

    }, { delay: 10 }), []);

    //上一步
    const prev = () => {
        factoryStore.setLoginStatus("made");
    }

    // 下一步
    const next = () => {
        form.validateFields()
            .then(async () => {

            }).catch(err => {
            })
    }

    return (
        <div
            ref={dom}
            className={styles.introduce}
        >
            <div className={styles.title}>您的企业简介</div>
            <div className={styles.subTitle}>使用此信息为您创建特殊的自动定价配置文件。</div>

            <Form
                form={form}
                name="basic"
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 14 }}
                initialValues={{
                }}
                autoComplete="off"
            >
                <div className={styles.subT} >对外宣传</div>

                <Form.Item
                    name="website"
                    label="企业网站"
                    rules={[{ message: '请输入企业网站!' }]}
                >
                    <Input className={styles.input} placeholder="企业网站" size="large" />
                </Form.Item>

                <Form.Item
                    name="websiteIntroduce"
                    label="企业介绍"
                    rules={[{ required: true, message: '请企业介绍!' }]}
                >
                    <Input.TextArea
                        maxLength={500}
                        count={{ max: 500, show: true }}
                        placeholder="企业介绍"
                        size="large" />
                </Form.Item>

                <Form.Item
                    name="i"
                    label="作品图集"
                    rules={[]}
                >
                    <div className={styles.t}>上传几张以往的样片,高分辨率照片,不超过20张</div>
                    <ImgItem
                        onClose={() => { }}
                        onClick={async () => {
                            const blobUrl = await utils.selectFileToBlob();
                            if (!blobUrl) return;
                            setLogo(blobUrl);
                        }}
                    />
                </Form.Item>

            </Form>

            <div className={styles.btns} >
                <Button
                    onClick={() => {
                        prev();
                    }}
                >
                    &nbsp;上一步&nbsp;
                </Button>
                &nbsp;
                <Button
                    type="primary"
                    onClick={() => {
                        next();
                    }}
                >
                    &nbsp;提交审核&nbsp;
                </Button>
            </div>

        </div>
    );

}